<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#parse("/WEB-INF/views_webapp/layout/css.html")
#parse("/WEB-INF/views_webapp/layout/base.html")
<style type="text/css">
	body{
		background: #eee;
		overflow: hidden;
	}
	.loginbox{
		margin:1rem 0 0 0;
		position: relative;
		box-shadow:0 0 1px #ccc;
		-webkit-box-shadow:0 0 1px #ccc;
		padding: 0.5rem;
		background: #fff;
	}
	.loginline{
		display: -webkit-box; 
	    display: -webkit-flex;
	    display: flex;
	    position: relative;
	}
	.loinginput{
		-webkit-flex: 1;
		flex: 1;
	}
	.loinglable{
		font-size:1.8rem;
		line-height: 5rem;
		width: 5rem;
		text-align: center;
		color:orange;
	}
	.ltxt{
		display: block;
		width: 100%;
		border: 0;
		height: 5rem;
	}
	.line-b:before{
		content: '';
	    display: block;
	    position: absolute;
	    bottom:0;
	    right: 0;
	    left: 0;
	    width: 100%;
	    height:1px;
	    border-bottom: 1px solid #eee;
	    -webkit-transform: scaleY(0.1);
	    transform: scaleY(0.1);
	    -webkit-transform-origin: 0 100%;
	          transform-origin: 0 100%;
	    z-index: 10;
	}
	.subbtn{
		display: block;
		width: auto;
		height: 5rem;
		background:#04BE02;
		text-align: center;
		line-height: 5rem;
		color: #fff;
		border-radius:4px;
		margin: 0.5rem;
	}
	.send_code{
		width:9rem;
		height:3rem;
		line-height: 3rem;
		text-align: center;
		border-left: 1px solid #eee;
		font-size: 1.2rem;
		margin-top: 1rem;
	}
	.tips{
		padding: 1.5rem 0.5rem 1rem 0.5rem;
		color: orange;
		font-size: 1.2rem;
	}
	.banquan{
		position: fixed;
		bottom:2rem;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
		color: #ccc;
	}
</style>
</head>
<body>
<div class="wrapper">
	<div class="loginbox">
		<div class="loginline  line-b">
			<div class="loinglable">
				<i class="iconfont icon-wo"></i>
			</div>
			<div class="loinginput">
				<input type="text" id="phone"   class="ltxt" placeholder="请输入您的手机号码"/>
			</div>
		</div>
		<div class="loginline">
			<div class="loinglable">
				<i class="iconfont icon-yanzhengma"></i>
			</div>
			<div class="loinginput">
				<input type="text" class="ltxt" id="captcha" placeholder="请输入验证码"/>
			</div>
			<div id="sendcode" class="send_code">
				发送验证码
			</div>
		</div>
	</div>
	<div class="tips">
		第一次使用需绑定手机号码！
	</div>
	<a id="subbtn" class="subbtn">提交</a>
</div>

<div class="banquan">
	咕哒猎人版权所有
</div>
#parse("/WEB-INF/views_webapp/layout/bottom.html")
<script type="text/javascript">
	$(function(){
//		$.ui.toptip("您需要先绑定手机号码");
		//发送验证码
		$("#sendcode").click(function(){
			if (!validatemobile($("#phone").val())) {
				return false;
			}
			if(!$(this).hasClass("busy")){
				//调用发送请求
				$.ajax({
		    		type: 'POST',
		    		url: path + "/h5/sms" ,
		    		data: {
		    		phone:$("#phone").val() },	    
		    		dataType:"json",
		    		success: function(data){
		    		if(data.code==200){	
		    			$.ui.toptip("验证码已发送，请查收");	
		    			$("#captcha").val(data.data)
		    			}
		   			 } 
				});
				$(this).addClass("busy");
				setInterV();
				inter=window.setInterval(setInterV,1000);
			}
		});
		
		
	//提交
		$("#subbtn").click(function() {
			if (!validatemobile($("#phone").val())) {
				return false;
			}
			if ($("#captcha").val() == '' || $("#captcha").val() == null) {
				$.ui.toptip("请填写验证码！")
				return false;
			}
			$.ui.mask("客官稍等……", true);
			$.ajax({
				type : 'POST',
				url : path + "/h5/saveBindPhone",
				data : {
					phone : $("#phone").val(),
					captcha : $("#captcha").val()
				},
				dataType : "json",
				success : function(data) {
					if (data.code == 200) {
						//$.ui.toptip("绑定成功");
						window.location.href= path + "/h5/saveBindPhone/success";
					} else {
						$.ui.toptip(data.msg);
					}
				}
			});
			$.ui.unmask();
		});
	});

	var tims = 60;
	var inter;

	function setInterV() {
		$("#sendcode").html(tims + "s后重发");
		tims = tims - 1;
		if (tims <= 1) {
			window.clearInterval(inter);
			$("#sendcode").removeClass("busy");
			$("#sendcode").html("发送验证码");
			tims = 60;

		}
	}

	function validatemobile(mobile) {
		if (mobile.length == 0) {
			$.ui.toptip('请输入手机号码！');
			$("#phone").val("");
			return false;
		}
		if (mobile.length != 11) {
			$.ui.toptip('请输入有效的手机号码！');
			$("#phone").val("");
			return false;
		}

		var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
		if (!myreg.test(mobile)) {
			$.ui.toptip('请输入有效的手机号码！');
			$("#phone").val("");
			return false;
		}

		return true;
	}
</script>
</body>
</html>